<template>
  <div 
    :class="$style.container" 
    class="tabs">
    <el-card>
      <el-tabs 
        v-model="activeName" 
        @tab-click="handleClick">
        <el-tab-pane 
          label="全部订单" 
          name="all">
          <Item 
            :lists="lists" 
            :tab="activeName"/>
        </el-tab-pane>
        <el-tab-pane 
          label="待付款" 
          name="wait">
          <Item 
            :lists="lists" 
            :tab="activeName"/>
        </el-tab-pane>
        <el-tab-pane 
          label="待使用" 
          name="use">
          <Item 
            :lists="lists" 
            :tab="activeName"/>
        </el-tab-pane>
        <el-tab-pane 
          label="待评论" 
          name="comment">
          <Item 
            :lists="lists" 
            :tab="activeName" 
            :comments="comments"/>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import Item from '../../components/order/item'
import http from '../../APIService/http'
export default {
  components: {
    Item
  },
  data() {
    return {
      activeName: 'all',
      lists: [],
      comments: [],
      allLists: []
    }
  },
  async asyncData(ctx) {
    try {
      let params = {
        token: ctx.app.$cookiz.get(ctx.app.$api.token)
      }
      let [likeRes, comRes] = await Promise.all([
        http.get(`/order/getMyOrder`, params),
        http.get(`/comment/getMyComments`, params)
      ])
      let allLists = likeRes.data
      let comments = comRes.data
      let id = +ctx.query.id
      let activeName = 'all'
      if (id === 0) {
        activeName = 'all'
      } else if (id === 1) {
        activeName = 'wait'
      } else if (id === 2) {
        activeName = 'use'
      } else if (id === 3) {
        activeName = 'comment'
      }
      let lists = []
      if (activeName === 'all') {
        lists = [...allLists]
      } else if (activeName === 'wait') {
        lists = allLists.filter(item => item.status === 0)
      } else if (activeName === 'use') {
        lists = allLists.filter(item => item.status === 1)
      } else if (activeName === 'comment') {
        allLists.forEach(item => {
          if (!comments.includes(item.doubanId) && item.status === 1) {
            lists.push(item)
          }
        })
      }
      return {
        allLists,
        comments,
        activeName,
        lists
      }
    } catch (err) {
      console.log('get order fail:', err)
    }
  },
  methods: {
    handleClick(tab) {
      this.activeName = tab.name
      let lists = []
      if (tab.name === 'all') {
        lists = [...this.allLists]
      } else if (tab.name === 'wait') {
        lists = this.allLists.filter(item => item.status === 0)
      } else if (tab.name === 'use') {
        lists = this.allLists.filter(item => item.status === 1)
      } else if (tab.name === 'comment') {
        this.allLists.forEach(item => {
          if (!this.comments.includes(item.doubanId) && item.status === 1) {
            lists.push(item)
          }
        })
      }
      this.lists = lists
    }
  }
}
</script>

<style lang='scss' module>
.container {
}
</style>
<style scoped>
.tabs >>> .el-tabs__item {
  font-size: 20px;
  color: #222;
  line-height: 26px;
  text-align: center;
  height: 38px;
  font-weight: 500;
  cursor: pointer;
}
.tabs >>> .el-tabs__active-bar {
  background: #e36049;
}
.tabs >>> .is-active {
  color: #e36049;
}
</style>
